<template>
  <div class="city-address-box">
    <el-card class="box-card" shadow="never">
      <div class="search-box" style="overflow: hidden">
        <div class="search-left">
          <el-icon>
            <Search />
          </el-icon>
          <span>筛选搜索</span>
        </div>

        <div class="search-right">
          <el-button @click="resetFun" class="reset-btn">
            <span>重置</span>
          </el-button>
          <el-button type="primary" @click="getLists" class="el-button">
            <span>查询结果</span>
          </el-button>
        </div>
      </div>
      <el-form :model="search" ref="searchForm" label-width="100px" class="search-form" style="overflow-x: auto">
        <el-form-item label="省份:" prop="provinceID">
          <el-select v-model="search.provinceID" class="m-2" placeholder="书籍类型" size="large" @change="getLists">
            <el-option v-for="item in shengs" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
      </el-form>
    </el-card>
    <el-table :data="lists" border style="width: 100%" @row-click="rowCli">
      <!-- <el-table-column prop="id" label="编号" align="center" width="100px" header-align="center">
      </el-table-column> -->

      <el-table-column prop="city" label="名称" align="center" header-align="center"> </el-table-column>

      <!-- <el-table-column prop="cityid" label="编码" align="center" header-align="center"> </el-table-column> -->

      <el-table-column prop="debang" label="德邦权重" align="center" header-align="center">
        <template #default="scope">
          <el-input type="number" placeholder="请输入内容" size="large" v-model="scope.row.debang"></el-input>
        </template>
      </el-table-column>

      <el-table-column prop="jingdong" label="京东权重" align="center" header-align="center">
        <template #default="scope">
          <el-input type="number" placeholder="请输入内容" size="large" v-model="scope.row.jingdong"></el-input>
        </template>
      </el-table-column>

      <!-- <el-table-column label="操作" align="center" header-align="center" width="160px">
        <template #default="scope">
          <el-icon @click.stop="editFun(scope.row)" class="lists-edit-icon">
            <Edit />
          </el-icon>
        </template>
      </el-table-column> -->
    </el-table>
    <div class="save-btn-box">
      <el-button type="primary" @click="saveFun" class="el-button">
        <span>保存修改</span>
      </el-button>
    </div>
    <!-- 添加编辑文章类型 -->
    <addEdit :show="showAddEdit" :addEditData="addEditData" :status="addEditStatus" @hide-addEdit="hideAddEdit" />
  </div>
</template>
<script setup>
import { computed, onMounted, ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useUserStore } from "@/pinia/user"
import { getAllSheng, getAllShi, UpdateCityYouxianji } from '@api/common'

const userStore = useUserStore()

const router = useRouter()

//获取列表
const search = ref({
  provinceID: ""
})

const resetFun = () => {
  search.value = {
    provinceID: ""
  }
  getLists()
}

const getInit = async () => {
  await getAllShengFun();
  getLists();
}

const shengs = ref([])
async function getAllShengFun() {

  let res = await getAllSheng({})
  shengs.value = res.data

  if (res.code == 200) {
    shengs.value = res.data.map(v => {
      return {
        label: v.province,
        value: v.provinceID
      }
    })
    search.value.provinceID = res.data.length ? res.data[0].provinceID : ''
  }

}

const pageNo = ref(1)
const pageSize = ref(10)
const total = ref(10)

const lists = ref([])
async function getLists() {
  let {
    provinceID
  } = search.value

  let searchOpt = {
    provinceID
  }

  let res = await getAllShi(searchOpt)
  lists.value = res.data

  if (res.code == 200) {
    lists.value = res.data.map(v => {
      return {
        ...v,
      }
    })
    total.value = parseInt(res.msg)
  }

}

//pageSize改变
function handleSizeChange(val) {
  pageSize.value = val
  getLists()
}

//pageNo改变
function handleCurrentChange(val) {
  pageNo.value = val
  getLists()
  // this.$store.dispatch('setpageNo', val);
}

//上一页
function handlePrev(val) {
  pageNo.value = val
  getLists()
}

//下一页
function handleNext(val) {
  pageNo.value = val
  getLists()
}

const saveFun = async () => {
  let data = lists.value.map(v => {
    return {
      city: v.id,
      debang: v.debang,
      jingdong: v.jingdong
    }
  })
  let res = await UpdateCityYouxianji({ list: data })
  if (res.code == 200) {
    ElMessage({
      message: '操作成功!',
      type: 'success'
    })
  }
}

onMounted(() => {
  getInit()
})
</script>
<style lang="scss" scoped>
.city-address-box {
  .save-btn-box {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
    padding: 50px 0;
  }
}
</style>
